<template>
  <div class="ApplicationForm">
    <div class="ApplicationForm-table">
      <div class="button">
        <el-button size="default" :icon="CirclePlus" @click="onOpenAddRole('add')" type="primary"> 新增 </el-button>
        <!--        <el-button plain size="default" @click="onOpenResizeDialog('add')" type="primary">-->
        <!--          <el-icon><Operation /></el-icon>-->
        <!--          转移明细项目-->
        <!--        </el-button>-->
      </div>
      <div class="ApplicationForm-table-ls right-project-ls">
        <pure-table
          ref="tableRef"
          :row-key="row => row.tid"
          highlight-current-row
          adaptive
          border
          align-whole="center"
          show-overflow-tooltip
          :data="tableData"
          :columns="columns"
          class="pure-table"
        >
          <template #caoZuo="scope">
            <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" link :icon="EditPen" @click="onOpenEditRole('edit', scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </pure-table>
      </div>
    </div>
    <add-dialog-form-detail ref="addDialogFormDetailRef" @refresh="getTableData()" />
    <!--    下边的这个好像是编辑，但是那没有用到-->
    <shift-dialog-form-detail ref="shiftDialogRef" />
  </div>
</template>
<script setup lang="tsx">
import { CirclePlus, DCaret, Delete, EditPen } from "@element-plus/icons-vue";
import { computed, nextTick, onMounted, ref, watch } from "vue";
import AddDialogFormDetail from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/addDialogFormDetail.vue";
import ShiftDialogFormDetail from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/shiftDialogFormDetail.vue";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import { useHandleData } from "@/hooks/useHandleData";
import { DeleteMingXiXiangMuDel, PutMingXiXiangMuTiaoZhengShunXu } from "@/api/modules/integratedProject";
import Sortable from "sortablejs";
import { ElMessage } from "element-plus";
onMounted(() => {
  rowDrop();
});
const columns = [
  {
    label: "排序",
    // type: "index",
    width: "70",
    cellRenderer: () => (
      <el-tag class="move">
        <el-icon>
          <DCaret />
        </el-icon>
      </el-tag>
    )
  },
  {
    label: "序号",
    type: "index",
    width: "70"
  },
  {
    label: "明细项目名称",
    prop: "MingXiXiangMuMingCheng"
  },
  {
    label: "拼音码",
    prop: "PYM"
  },
  {
    label: "适用性别",
    prop: "ShiYongXingBie"
  },
  {
    label: "报告所属分类",
    prop: "BaoGaoSuoShuFenLei"
  },
  {
    label: "参考范围",
    prop: "CanKaoFanWei"
  },
  {
    label: "结果类型",
    prop: "JieGuoLeiXing"
  },
  {
    label: "参考下限",
    prop: "CanKaoXiaXian"
  },
  {
    label: "单位",
    prop: "DanWei"
  },
  {
    label: "偏低提示",
    prop: "PianDiTiShi"
  },
  {
    label: "参考上限",
    prop: "CanKaoShangXian"
  },
  {
    label: "备注1",
    prop: "BeiZhu1"
  },
  {
    label: "偏高提示",
    prop: "PianGaoTiShi"
  },
  {
    label: "Lis项目编码",
    prop: "LisXiangMuBianMa"
  },
  {
    label: "备注2",
    prop: "BeiZhu2"
  },
  {
    label: "是否启用",
    prop: "ShiFouQiYong"
  },
  {
    label: "省平台编码",
    prop: "ShengPingTaiBianMa"
  },
  {
    label: "操作",
    fixed: "right",
    width: "100",
    slot: "caoZuo"
  }
];
const tableData = ref<any>([]);
const tableRef = ref();
const addDialogFormDetailRef = ref();
const shiftDialogRef = ref();
const rowDrop = () => {
  nextTick(() => {
    const wrapper: HTMLElement | any = document.querySelector(".right-project-ls .el-table__body-wrapper tbody");
    Sortable.create(wrapper, {
      animation: 300,
      // handle: ".drag-btn",
      handle: ".move",
      onEnd: ({ newIndex, oldIndex }) => {
        const [removedItem] = tableData.value.splice(oldIndex!, 1);
        tableData.value.splice(newIndex!, 0, removedItem);
        PutMingXiXiangMuTiaoZhengShunXu(removedItem.ShunXu, newIndex, removedItem.MingXiXiangMuID).then(() => {
          getTableData();
        });
      }
    });
  });
};
const deleteAccount = async (row: Partial<any> = {}) => {
  await useHandleData(DeleteMingXiXiangMuDel, row.MingXiXiangMuID, `删除【${row.MingXiXiangMuMingCheng}】`);
  useIntegratedProject().getBaoHanMingXiSel();
};
// 打开新增弹窗
const onOpenAddRole = (type: string) => {
  if (useIntegratedProject().zuHeXiangMuID) {
    addDialogFormDetailRef.value.openDialog(type);
  } else {
    ElMessage.error("请先选择组合项目");
  }
};
// 打开修改角色弹窗
const onOpenEditRole = (type: string, row: Object) => {
  addDialogFormDetailRef.value.openDialog(type, row);
};
// 初始化表格
const getTableData = () => {
  useIntegratedProject().getBaoHanMingXiSel();
};

// const onOpenResizeDialog = (type: string) => {
//   shiftDialogRef.value.openDialog(type);
// };
const newShenQingDanOption = computed(() => {
  return useIntegratedProject().baoHanMingXiOption;
});
watch(newShenQingDanOption, () => {
  tableData.value = [...newShenQingDanOption.value];
});
</script>
<style scoped lang="scss">
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .ApplicationForm-search {
    height: 25px;
    padding: 10px 20px;
    background: white;
    .ApplicationForm-search-span-ls {
      font-size: larger;
      font-weight: 900;
      line-height: 0;
      color: #239487;
    }
    .ApplicationForm-search-span {
      margin-left: 5px;
      color: #239487;
    }
  }
  .ApplicationForm-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 20px;
    margin-top: 8px;
    background: white;
    .ApplicationForm-table-ls {
      display: flex;
      flex: 1;
      margin-top: 10px;
      .pure-table {
        flex: 1;
      }
    }
  }
}
</style>
